<template>
    <el-dialog
        :title="configData.title"
        v-model="configData.open"
        width="400px"
        :close-on-click-modal="false"
        append-to-body>
        <el-upload
            ref="uploadRef"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="configData.headers"
            :action="configData.url+'?updateSupport='+configData.updateSupport"
            :disabled="configData.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :on-error="handleFileError"
            :on-exceed="handleExceed"
            :auto-upload="false"
            drag>
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <template #tip>
                <div class="el-upload__tip text-center">
                    <span>仅允许导入xls、xlsx格式文件。</span>
                    <el-link
                        type="primary"
                        :underline="false"
                        style="font-size: 12px; vertical-align: baseline"
                        @click="downTemplate">
                        下载模板
                    </el-link>
                </div>
            </template>
        </el-upload>
        <template #footer>
            <div class="dialog-footer">
                <el-button
                    type="primary"
                    :loading="configData.isUploading"
                    @click="submitFileForm">
                    确 定
                </el-button>
                <el-button @click="configData.open=false">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
/**
 * 批量导入数据对话框
 */
import { list } from "@/api/research/contract";
import { defineComponent,ref,getCurrentInstance,reactive } from "vue";
import { batchImportUrl,downTemplateUrl } from "@/api/research/contractStudent";
import { getToken } from '@/utils/auth';

export default defineComponent({
    name:'ImportData',
    emits:['onSuccess','onError'],
    setup(_,{emit}){
        const { proxy:instance } = getCurrentInstance();
        let loadingInstance;
        const configData = reactive({
            open: false,
            title: "批量导入",
            // 是否更新已经存在的用户数据
            updateSupport: 0,
            isUploading: false,
            headers: { Authorization: "Bearer " + getToken() },
            url: batchImportUrl,
        });
        /** 初始化数据（外部调用） */
        function initData(show=true){
            configData.open = show;
        }
        /**文件上传中处理 */
        function handleFileUploadProgress (){
            loadingInstance = instance.$loading({ fullscreen: true,text:'正在上传...' });  //创建一个全屏loading实例
            configData.isUploading = true;
        };
        /** 文件上传成功处理 */
        function handleFileSuccess (res){
            const { code,msg } = res;
            if(code != 200){
                handleFileError();
                return;
            }
            loadingInstance.close();
            configData.open = false;
            configData.isUploading = false;
            emit('onSuccess',res);
        };
        /** 文件上传失败处理 */
        function handleFileError (){
            loadingInstance.close();
            configData.isUploading = false;
            instance.$modal.msgError("操作失败");
            emit('onError');

        };
        /** 清空文件 */
        function removeFile(){
            instance.$refs["uploadRef"].clearFiles();
        }
        /** 超出限制 */
        function handleExceed(files){
            instance.$refs["uploadRef"].clearFiles();
            const file = files[0];
            instance.$refs["uploadRef"].handleStart(file);
        }
        /** 下载模板 */
        function downTemplate(){
            /** 下载模板操作 */
            instance.download(
                downTemplateUrl,
                {},
                `template_${new Date().getTime()}.xlsx`,
            );
        }
        /** 提交上传文件 */
        function submitFileForm() {
            instance.$refs["uploadRef"].submit();
        };
        return {
            configData,initData,handleFileUploadProgress,
            handleFileSuccess,handleFileError,downTemplate,
            submitFileForm,handleExceed,
        };
    },
});
</script>
